<template>
  <div>
    <a-divider>分支规则</a-divider>
    <a-form-item label='流入决定流出' v-bind="formItemLayout" extra="填写流程线条ID。指定当经过本分支流入时，在指向的用户节点允许显示的流出分支。没有指定时则按流程图显示所有流出分支。">
      <a-row v-for="(item, index) in configData.incomingDecideOutgoings"
             :key="item.key">
        <a-col span="20">
          <a-input v-model="item.sequenceFlowId" @change="dataChange"></a-input>
        </a-col>
        <a-col span="4">
          <a-icon
            v-if="configData.incomingDecideOutgoings.length > 0"
            class="dynamic-delete-button"
            type="minus-circle-o"
            :disabled="configData.incomingDecideOutgoings.length === 0"
            @click="removeItem(item)"
          />
        </a-col>
      </a-row>
      <a-button type="dashed" style="width: 100%" @click="addItem">
        <a-icon type="plus"/>
        添加允许的流出分支
      </a-button>
    </a-form-item>
    <a-form-item label='显示规则' v-bind="formItemLayout" extra="根据流程关联数据，决定是否在流出的用户节点显示本分支。">
      <a-textarea placeholder="aviator表达式" v-model="configData.displayRule.aviatorExpression" :auto-size="{ minRows: 5}" @change="dataChange"/>
    </a-form-item>
    <a-form-item label='选择验证规则' v-bind="formItemLayout" extra="本分支在流出的用户节点中显示，但需根据该节点用户表单填写的数据决定是否允许选择本分支。">
      <a-radio-group v-model="configData.selectRule.type" button-style="solid" size="small">
        <a-radio-button value="1">
          Aviator
        </a-radio-button>
        <a-radio-button value="2">
          规则插件
        </a-radio-button>
      </a-radio-group>
      <div v-if="configData.selectRule.type === '1'">
        <a-textarea placeholder="aviator表达式" v-model="configData.selectRule.aviatorExpression" :auto-size="{ minRows: 5}" @change="dataChange"/>
      </div>
      <div v-if="configData.selectRule.type === '2'">
        <span>已配置{{configData.selectRule.ctRules.length}}个规则 | <a @click="editFlowRulePlugins">配置</a></span>
      </div>
    </a-form-item>
    <flow-rule-plugin-config @change="dataChange" v-model="configData.selectRule.ctRules" ref="FlowRulePluginConfig"></flow-rule-plugin-config>
  </div>
</template>
<script>

import FlowRulePluginConfig from "./FlowRulePluginConfig";

const formItemLayout = {
  labelCol: {span: 8},
  wrapperCol: {span: 14}
}
const formItemLayout2 = {
  labelCol: {span: 14},
  wrapperCol: {span: 8}
}
export default {
  name: 'SequenceFlowConfig',
  components: {FlowRulePluginConfig},
  props: {
    configData: {
      type: Object,
      default: () => ({
        // 对应后端 CustomSequenceFlow
        incomingDecideOutgoings: [],
        displayRule: {
          aviatorExpression: ''
        },
        selectRule: {
          type: '',
          aviatorExpression: '',
          ctRules: []
        }
      })
    }
  },
  model: {
    prop: 'configData',
    event: 'input'
  },
  data () {
    return {
      formItemLayout,
      formItemLayout2,
      serviceTaskList: {}
    }
  },
  methods: {
    editFlowRulePlugins() {
      this.$refs.FlowRulePluginConfig.edit('分支验证规则', 'CTRule')
    },
    dataChange () {
      this.$emit('input', this.configData)
    },
    removeItem(item) {
      let index = this.configData.incomingDecideOutgoings.indexOf(item)
      if (index !== -1) {
        this.configData.incomingDecideOutgoings.splice(index, 1)
      }
    },
    addItem() {
      console.log(this.configData)
      if (this.configData.incomingDecideOutgoings === undefined) {
        this.configData.incomingDecideOutgoings = []
      }
      this.configData.incomingDecideOutgoings.push({
        sequenceFlowId: '',
        key: Date.now()
      })
    },
  },
  mounted () {
  }
}
</script>

<style scoped>
.dynamic-delete-button {
  cursor: pointer;
  position: relative;
  top: 4px;
  padding-left: 4px;
  font-size: 24px;
  color: #999;
  transition: all 0.3s;
}

.dynamic-delete-button:hover {
  color: #777;
}

.dynamic-delete-button[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}
</style>
